<style scoped>
.site-list {
  width: 100%;
}
.title-container {
  margin: 20px auto;
}

.search-list {
  display: grid;
  grid-auto-flow: row dense;
  grid-template-rows: auto;
  grid-template-columns: repeat(4, 25%);
}

.card-a {
  text-decoration: none;
  color: #999999;
}

.pricetag {
  color: #ff5e57;
  margin: 4px;
}

.list-card {
  max-width: 270px;
  margin: 20px;
  text-align: center;
}

.category-img {
  max-width: 140px;
}

.ivu-divider-horizontal {
  margin: 10px;
}

.brand-tag {
  margin: 10px;
}

.goods-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

button {
  margin-top: 10px;
  opacity: 0.85;
}

@media screen and (max-width: 1199px) {
  .search-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .list-card {
    max-width: 200px;
  }

  .category-img {
    max-width: 140px;
  }
}

@media screen and (max-width: 765px) {
  .list-card {
    max-width: 160px;
    margin: 5px;
  }

  .category-img {
    max-width: 100px;
  }

  .brand-tag {
    display: none;
  }
}

@media screen and (max-width: 500px) {
  .list-card {
    width: 140px;
    margin: 5px;
  }
}

.page-site {
  margin: 10px auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>
<template>
  <div class="site-list">
    <div class="title-container">
      <Divider type="horizontal" orientation="center"> </Divider>
      <div class="list-container">
        <div class="search-list">
          <Card
            class="list-card"
            v-for="(item, index) in list.results"
            :key="index"
          >
            <a class="card-a" :href="item.goods_url" target="_blank">
              <img :src="item.image_url" alt="category" class="category-img" />
              <h2 class="pricetag">￥{{ item.price }}</h2>
              <h4 class="goods-text">{{ item.goods }}</h4>
              <Button type="warning">直达链接</Button>

              <Divider></Divider>
              <div class="brand-tag">
                <Tag color="#ffd868">{{ item.category }}</Tag>
                <Tag color="#98d6ea">{{ item.item }}</Tag>
                <Tag color="#ffb385">{{ item.keyword }}</Tag>
              </div>
              <h5>{{ item.shop }}</h5>
            </a>
          </Card>
        </div>
      </div>
    </div>
    <div class="page-site">
      <Page :total="list.count" @on-change="handlePage" :page-size="20" />
    </div>
    <BackTop :bottom="100"></BackTop>
  </div>
</template>

<script>
export default {
    name: "SiteList",
    props: {
        list: {
            type: Object
        },
        value: {
            type: String
        }
    },
    data() {
        return {};
    },
    mounted() {
        window.addEventListener("scroll", this.handleScroll);
    },
    methods: {
        handlePage(p) {
            var that = this;
            // console.log(p);
            let baseUrl = this.value;
            // console.log(baseUrl);
            this.$http
                .get(baseUrl + "&p=" + p)
                .then(function(res) {
                    that.list = res.data;
                })
                .catch(function(error) {
                    console.log(error);
                });
            document.body.scrollTop = document.documentElement.scrollTop = 0;
        }
    }
};
</script>
